<!--身份管理-->
<template>
  <div class="gen">
    <h4>身份管理</h4>
    <div class="background">
    <el-button class="xz" size="small" type="success" @click="idvisible = true">新增身份</el-button>
    <!--新增身份及弹窗-->
    <el-dialog :visible.sync="idvisible" :close-on-click-modal="false" width="547px" center title="新增身份">
      <el-form>
        <el-form-item :label-width="formLabelWidth" label="身份类型">
          <el-select v-model="groupNum" placeholder="请选择身份类型" focus="roleFocus">
            <el-option
                v-for="item in groupNums"
                :key="item.id"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="身份名称">
          <el-input v-model="name" autocomplete="off" placehoder="填写身份名称" style="width: 222px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="idSubmit()" center="true">确 定</el-button>
      </div>
    </el-dialog>
    <!--表格-->
    <el-table
        stripe
        border
        class="xz"
        v-loading="loading"
        :data=idList
        :cell-style="tableCellStyle"
        :header-cell-style='tableHeaderColor'>
<!--      不显示身份id-->
<!--      <el-table-column prop="id" label="身份id"></el-table-column>-->
      <el-table-column label="身份名称" prop="name"></el-table-column>
      <el-table-column prop="groupNum" label="身份类型">
        <template slot-scope="scope">
          <p v-if="scope.row.groupNum===1">教职工</p>
          <p v-if="scope.row.groupNum===2">学生</p>
          <p v-if="scope.row.groupNum===3">临时人员</p>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button disabled size="mini" type="danger" @click="idDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页符-->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        style="text-align: center;padding-bottom: 40px"
        @current-change="idCurrentChange"
        :data="idList">
    </el-pagination>
    </div>
  </div>

</template>

<script>
import {idAddObj, idDelObj, identityObj, idPageObj} from '@/api/depart/identity'

export default {
  name: "id",
  created() {
    this.identityList();
    this.idCurrentChange();
  },
  data() {
    return {
      idList: [],// 身份表格数据
      total:null,//默认数据总数
      name:'',//弹窗身份名称设置
      loading: false,
      groupNum:'1',
      groupNums: [{
        value: '1',
        label: '教职工'
      }, {
        value: '2',
        label: '学生'
      }, {
        value: '3',
        label: '临时人员'
      }],
      formLabelWidth: '120px',//弹窗宽度
      idvisible: false,//弹窗默认是否显示
      //表格样式
      tableCellStyle:{
        'font-size':'16px',
        'padding':'14px 0',
        'color':'#000',
        'text-align':'center',
      },
      //表头样式
      tableHeaderColor:{
        'font-size':'16px',
        'padding':'14px 0',
        'font-weight': 'normal',
        'color':'#000',
        'background-color':'#fafafa',
        'text-align':'center',
      },
      rules: {
        groupNums: [
          {required: true,trigger: "none"}
        ],
        name: [
          {required: true, trigger: "none"}
        ],

      },
    }
  },
  methods: {
    //展示表格
    identityList() {
      this.loading = true;
      let param = {
        'current':this.currentPage,
      }
      identityObj(param).then(res => {
        this.total=res.data.data.total;
        this.idList = res.data.data.records
        this.loading = false;
      });
    },

    //新增
    idSubmit() {
      let param = {
        'name': this.name,
        'groupNum': this.groupNum,
      }
      if(this.name === ''){
        this.$message.error('提交失败,请输入身份名称')
        return;
      }
      this.loading = true;
      idAddObj(param).then(res => {
        this.name = null
        this.groupNum = null
        this.identityList()
        this.idvisible = false;
        this.loading = false;
        this.$message.success('添加成功')
      });
      this.loading = false;
    },

    //删除
    idDelete(row) {
      this.$confirm('是否删除身份"' + row.name + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal:false,
      }).then(function () {
        return idDelObj(row.id);
      }).then(() => {
        this.identityList();
        this.$message.success('删除成功')
      })
    },

    //分页
    idCurrentChange(val) {
      this.currentPage = val;
      let param = {
        'current':this.currentPage,
      }
      idPageObj(param).then(res => {
        this.total=res.data.data.total;
        this.idList = res.data.data.records
      });
    },

  },
}

</script>

<style scoped>
.background{
  background: #fff;
}
.gen h4{
  margin:20px 0 20px 30px;
}
.xz{
  margin-left: 30px;
  margin-bottom: 30px;
  margin-top: 20px;
}
p{
  margin: 0;
  padding: 0;
}
</style>